<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <!-- Loding font -->
    <link href="https://fonts.googleapis.com/css?family=Montserrat:300,700" rel="stylesheet">

    <!-- Custom Styles -->
    <link rel="stylesheet" type="text/css" href="css/login.css">

    <title>Login</title>
  </head>
  <body>

    <!-- Backgrounds -->

    <div id="login-bg" class="container-fluid">

      <div class="bg-img"></div>
      <div class="bg-color"></div>
    </div>

    <!-- End Backgrounds -->

    <div class="container" id="login">
        <div class="row justify-content-center">
        <div class="col-lg-8">
          <div class="login">

            <h1>摇一摇</h1>
            
            <!-- Loging form -->
                  <form>
                    <div class="form-group">
                      <input type="text" class="form-control" id="roomId" aria-describedby="emailHelp" placeholder="输入房间号">
                    </div>
                    <div class="form-group">
                      <input type="text" class="form-control" id="username" placeholder="输入你的名字">
                    </div>

                      <div class="form-check">

                     <label class="switch" onclick="change()">
                      <input type="checkbox" id="cr" >
                      <span class="slider round" ></span>
                    </label>
                      <label class="form-check-label" for="exampleCheck1">创建新房间?</label>
                      
                    </div>
                  
                    <br>
                    <button type="button" onclick="login()" class="btn btn-lg btn-block btn-success">进入房间</button>
                  </form>
             <!-- End Loging form -->

        </div>
        </div>
    </div>
  </body>
  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
 <script src="js/jquery.min.js"></script>
 <script type="text/javascript">
 	function login(){
 		let room = $("#roomId").val();
 		let username = $("#username").val();
 		let create = document.getElementById("cr").checked;
 		/* $.ajax({
 			type:'GET',
 			url:"/tologin?username="+username+"&room="+room+"&isCreate"+create,
 			success:function (e){
 				console.log(e);
 			}
 		}) */
 		this.location.href = "/dice?username="+username+"&room="+room+"&isCreate="+create
 	}
 	
 	function change(){
 		let cr = document.getElementById("cr");
 		console.log(cr.checked)
 		cr.checked == true ? cr.checked = false : cr.checked = true
 		console.log(cr.checked)
 	}
 </script>
</html>